<div style="font-weight: bold; font-size: 20px; margin-top: 20px"> ${serialNumber}、外省流动用户趋势 </div>
<div id="my_echarts2" style="width: 1000px; height: 400px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图1 外省流动用户趋势图</div>

<script>
    (function () {

        $(document).ready(function(){
            // 二、外省流动用户趋势
            /*var result2 = [
                {time: '05-21', count: 15},
                {time: '05-22', count: 55},
                {time: '05-23', count: 1},
                {time: '05-24', count: 75},
                {time: '05-25', count: 75},
                {time: '05-26', count: 75},
            ];*/
            var result2 = ${outProvinceFlowUserList}
            var echarts2 = echarts.init(document.getElementById("my_echarts2"));
            var series2 = getSCategory(result2, 1).series;
            var xCategory2 = getSCategory(result2, 1).xCategory;
            var optionLine2 = getOption(xCategory2, series2, '外省流动用户趋势');
            echarts2.setOption(optionLine2);
        });
        function getOption(xCategory, series, title, legend, color) {
            return {
                title: {
                    text: title,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "line",
                    },
                },
                color: color? color: ['#4b91ff'],
                legend: {
                    show: legend?true: false,
                    data: legend,
                    icon: 'circle',
                    right: '4%'
                },
                grid: {
                    left: "8%",
                    right: "4%",
                    bottom: "5%",
                    containLabel: false,
                },
                xAxis: {
                    type: 'category',
                    data: xCategory,
                },
                yAxis: {
                    type: 'value'
                },
                series: series
            }
        }
        function getSCategory(result, type) {
            var series = [], xCategory = [], data = []
            $.each(result,function(index,item) {
                if(type===1) {
                    data.push(item.count);
                    xCategory.push(item.date);
                    if(index === (result.length-1)) {
                        series.push({ type: 'line', data: data, areaStyle: {opacity: 0.3} })
                    }
                } else if(type===2) {
                    var obj = { name: '', type: 'line', data: [] }
                    var count = $.map(item.datas, function(n, i){ return n.count; })
                    if(index===0) {
                        xCategory = $.map(item.datas, function(n, i){ return n.date; })
                    }
                    obj.name = item.type;
                    obj.data = count;
                    series.push(obj);
                }
            });
            return {
                series,
                xCategory
            }
        }
    })()
</script>